<template>
    <div class="comment-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入你要评论的内容(最多120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button size="large" type="primary" @click='postComment'>发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in comments">
                <div class="cmt-title">
                    第{{index + 1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content === 'undefined' ? '此用户没出输出内容' : item.content}}
                </div>
            </div>
        </div>
        <mt-button size="large" type="danger" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    export default {
        data() {
            return {
                pageIndex:1,
                comments:[],
                msg:''
            }
        },
        created() {
            this.getComments();
        },
        methods:{
            getComments(){
                this.$http.get("http://www.liulongbin.top:3005/api/getcomments/"+this.id+"?pageindex="+this.pageIndex).then(result => {
                    var result = result.body;
                    if(result){
                        // this.comments = result.message;
                        this.comments = this.comments.concat(result.message)
                    }
                },result =>{
                    Toast("加载数据失败")
                })
            },
            getMore(){
                this.pageIndex ++;
                this.getComments();
            },
            postComment(){
                if(this.msg.length === 0){
                    return Toast("你评论的内容不能为空！");
                }
                this.$http.post('http://www.liulongbin.top:3005/api/postcomment/' + this.$route.params.id,{
                    content:this.msg.trim()
                })
                    .then(function (result) {
                        var result = result.body;
                        if(result){
                            var cmt = {
                                user_name:"匿名用户",
                                add_time:Date.now(),
                                content:this.msg.trim()
                            };
                            this.comments.unshift(cmt);
                            this.msg = '';
                        }
                    })
            }

        },
        props:["id"]
    }
</script>

<style scoped>
    .comment-container h3 {
        font-size: 16px;
    }

    .comment-container textarea {
        font-size: 14px;
        margin: 0;
    }

    .comment-container .cmt-list {
        margin: 5px 0;
    }

    .comment-container .cmt-title {
        font-size: 13px;
        background: #ccc;
        line-height: 35px;
    }

    .comment-container .cmt-body {
        line-height: 35px;
        font-size: 13px;
        text-indent: 2em;
    }
</style>